{% extends "base.html" %}


{% block title %}
  {% if new %}
    新增安装脚本 | {{ game }}
  {% else %}
    编辑安装脚本 | {{ game }}
  {% endif %}
  | Wine游戏助手
{% endblock %}

{% block extra_head %}
  {{ form.media.css }}
{% endblock %}

{% block content %}
<h1>{% if new %}新增{% else %}编辑{% endif %} 安装脚本 | {{ game }}</h1>
<div class="row">
  <div class="col-sm-7">
    <div class="well">
    {% if versions %}
      <p>加载之前的版本</p>
      <select class='django-select2' id='revision-select'>
        {% for version in versions %}
        <option value="{{version.id}}" {% if version.id == revision_id %}selected{% endif %}>{{version.revision.comment}}</option>
        {% endfor %}
      </select>
    {% endif %}
    <form action="" method="post">
      {% csrf_token %}
      {{ form.as_p }}
      <div id='editor'></div>
      <input type="submit" class="btn" name="save" value="保存草稿">
      <input type="submit" class="btn btn-primary" name="submit" value="提交审核"/>
      {% if installer.draft %}
      <input type="submit" class="btn btn-danger" name="delete" value="删除草稿">
      {% endif %}
      {% if installer %}
      <a
        class='btn'
        id="test-installer-button"
        {% if revision_id %}
        href="winegame:{{game.slug}}?revision={{revision_id}}"
        {% else %}
        href="winegame:{{installer.slug}}"
        {% endif %}
      >测试该脚本</a>
      {% endif %}
      <a class='btn' href="{{game.get_absolute_url}}">取消</a>
    </form>
    <p>请先保存草稿再点测试，否则修改不会生效</p>
    </div>
  </div>

</div>
<div class="well docs fixed-panel">
    <h1>安装脚本文档</h1>
    {% include "docs/installers.html" %}
</div>
{% endblock %}


{% block scripts %}
  <script src="/static/ace/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    $(function(){
      // ACE editor config
      const textarea = $('textarea[name="content"]').hide();
      const editor = ace.edit("editor");
      editor.setTheme("ace/theme/twilight");
      editor.session.setMode("ace/mode/yaml");
      editor.session.setTabSize(4);
      editor.session.setUseSoftTabs(true);
      editor.setOption("fontSize", "16px");

      editor.getSession().setValue(textarea.val());
      editor.getSession().on('change', function(){
        textarea.val(editor.getSession().getValue());
      });

      {% if versions %}
      $('#revision-select').on('change', function(event) {
        const formUrl = "{% url 'edit_installer' slug=installer.slug  %}";
        const revisionId = event.target.value;
        window.location.replace(formUrl + "?revision=" + revisionId);
      })
      {% endif %}

    });
  </script>
  {{ block.super }}
  {{ form.media.js }}

{% endblock %}
